import React from 'react';
import './index.less'
import { Swiper, Image,Rate} from 'react-vant';
import {history} from 'umi'

const Xiangqing = () => {
    let imgs = [
        {id:'l1',img:'https://img0.baidu.com/it/u=4235151014,366241939&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=438'},
        {id:'l2',img:'https://img0.baidu.com/it/u=1587530485,2115630642&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500'},
        {id:'l3',img:'https://img1.baidu.com/it/u=3844165403,990120174&fm=253&fmt=auto&app=138&f=JPEG?w=450&h=300'},
        {id:'l4',img:'https://img1.baidu.com/it/u=863091270,2619062432&fm=253&fmt=auto&app=138&f=JPEG?w=324&h=216'},
    ]
    return <div className='xaingBox'>
        <img onClick={()=>history.push('/app/home')} className='imglrft' src={require('../../../../public/wzcimg/向左箭头.svg')} alt="" />
        <div className='lunbo'>
            <Swiper autoplay={3000}>
                {imgs.map((image) => (
                    <Swiper.Item key={image.id}>
                        <Image lazyload src={image.img}  className='imgnn'/>
                    </Swiper.Item>
                ))}
            </Swiper>
            <div className='jianjie'>
                <p><span className='span1'>￥6.90</span><span className='span2'>月销售500笔</span></p>
                <p className='p1'>菠菜约500g</p>
                <p className='p2'>运费：快递6元，满88包邮</p>
                <p className='p3'>温馨提示：不支持7天无理由退货</p>
            </div>
        </div>
        <div className='youBox'>
            <p className='p1'>优惠</p>
            <p className='p2'><span className='span1'>多买优惠</span> <span className='span2'>第二件5折</span></p>
            <p className='p3'><span className='span1'>减满</span><span className='span2'>满300减30</span></p>
        </div>
        <div className='xvanBox'>
            <p>已选：菠菜约500克</p>
        </div>
        <div className='pingBox'>
            <div className='head'>
                <span> 评价（200）</span>
                <span onClick={()=>history.push('/pingjia')} className='roght'>查看更多评价》</span>
            </div>
            <div className='imgBox'>
                    <div className='head'>
                        <div className='div1'><img src="https://img2.baidu.com/it/u=291987398,3598635560&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="" /></div>
                        <div className='div2'>
                            <p>133****1237</p>
                            <p className='p1'><Rate value={5}  size={'4vw'}/></p>
                        </div>
                    </div>
                    <p className='p2'>蔬菜很新鲜，很满意的一次购物</p>
                    <div className='pingpu'>
                        <img src="https://img2.baidu.com/it/u=117877854,2118602187&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500" alt="" />
                        <img src="https://img2.baidu.com/it/u=117877854,2118602187&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500" alt="" />
                        <img src="https://img2.baidu.com/it/u=117877854,2118602187&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500" alt="" />
                        <img src="https://img2.baidu.com/it/u=117877854,2118602187&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=500" alt="" />
                    </div>
                    <p className='p3'>菠菜 500g 2023-02-21 19:24</p>
            </div>
        </div>
        <div className='footBox'>
            <p>详情</p>
            <div className='headdiv'>
                <p className='p1'>产地：北京</p>
                <p>净重：300-500g</p>
            </div>
            <img src="https://img0.baidu.com/it/u=3900712803,3075443791&fm=253&fmt=auto&app=138&f=JPEG?w=667&h=500" alt="" />
            <img src="https://img0.baidu.com/it/u=3630081135,3955771679&fm=253&fmt=auto&app=138&f=JPEG?w=720&h=480" alt="" />
        </div>
    </div>;
}


export default Xiangqing;